<div class="page-wrapper">

    <div class="store-menu" style="display: block;">
        <div class="header">
            <a href="javascript:history.back();" class="left"><i class="icon-back"></i>首页</a>
            <div id="menus-title" class="title">菜单</div>
            <!--<div class="right"><i class="icon-book"></i>(<span class="total">4</span>)</div>-->
            <i id="waiter-menus-search" class="icon-search right"></i>
        </div>

        <div class="menu-body">
            <div class="category-wrapper">
                <ul class="category">
                </ul>
            </div>

            <div class="menu-wrapper">
                <div id="menus-menu-list" class="menu-list">
                    <div id="repeat-menu-item" style="display: none" class="menu-item" menu-id=${menu.id}
                         menu-name=${menu.name} menu-price=${menu.unitPrice}">
                        <i class="soldout icon-stampsoldout"></i>
                        <div class="thumb" style="background-image: url(/img/wxy.jpeg);"></div>
                        <div class="menu-right">
                            <div class="menu-name">天目湖剁椒鱼头</div>
                            <div class="line">
                                <div class="price">78</div>
                                <div class="menu-operation">
                                    <i class="icon-minus minus"></i>
                                    <span class="count">0</span>
                                    <i class="icon-add add"></i>
                                </div>
                            </div>
                            <div class="origin-price">￥25.0</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="search" style="display: none;">
        <div class="header">
            <div class="header-line">
                <div class="search-wrapper">
                    <i class="left-search icon-search"></i>
                    <input id="search-text" type="search" class="search-text" placeholder="请输入首字母或者菜品名称">
                    <i id="search-clear" class="right-search icon-i-clear"></i>
                </div>
                <span class="cancel">取消</span>
            </div>
        </div>

        <div class="search-body">
            <div id="waiter-search-list" class="search-item-list">
                <div id="waiter-search-repeat-item" class="menu-item" style="display: none;">
                    <div class="name">干锅包菜</div>
                    <div class="price">￥138</div>
                    <div class="menu-operation">
                        <i class="icon-minus minus" style=""></i>
                        <span class="count" style="">2</span>
                        <i class="icon-add add"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="cart-wrapper">
        <div class="cart-bottom-line">
            <span id="cart" class="left-cart icon-cart"><span id="cart-count" class="cart-count">0</span></span>
            <span class="vertical-line"></span>
            <span id="cart-price" class="cart-price">￥0</span>
            <button id="book" class="btn cart-book">下一步</button>
        </div>
    </div>

    <div class="food-list-wrapper">
        <div class="food-list">
            <div class="food-header">
                <div class="food-header-left">购物车</div>
                <div id="clear" class="food-header-right icon-remove"></div>
            </div>
            <div id="menus-cart-food-list" class="wrapper">
                <div id="repeat-cart-food-item" class="food-item" style="display: none;">
                    <span class="food-name"></span>
                    <div class="food-line">
                        <span class="price"></span>
                        <div class="menu-operation">
                            <i class="icon-minus minus"></i>
                            <span class="count"></span>
                            <i class="icon-add add"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script>
        (function(){
            'use strict';
            var $cartCount = $('#cart-count');
            var $cartPrice = $('#cart-price');

            console.log(cart);

            var tableName = spa.getParam('tableName');
            var isAppend = spa.getParam('isAppend');
            console.log(tableName + '  ' + isAppend);

            $('#menus-title').text((tableName || '加菜'));

            getCategory(window.storeId);

            updateCartMessage();

            spa.addResumeCallback(function(){
                console.log('menus resume');
                if(cart.getCount() == 0){
                    $('.menu-item .count').text(0).hide();
                    $('.menu-item .minus').hide();
                    updateCartMessage();
                }
            });

            function updateCartMessage(){
                $('.cart-bottom-line').removeClass('unpayed');

                $('#book').text(isAppend ? '加菜' : '下一步')
                var price = cart.getPrice();
                var count = cart.getCount();
                setCartCount(count);
                setCartPrice(price);
            }

            function setCartCount(text){
                $cartCount.text(text);
            }

            function setCartPrice(text){
                $cartPrice.text('￥' + text);
            }

            $('.food-list-wrapper').click(function (event) {
                if(event.target == this){
                    $(this).hide();
                    $repeatFoodItem.siblings().remove();
                }
            });

            $('.header .icon-search').click(function(event){
                $('.store-menu').fadeOut();
                $('.search').fadeIn();
                $('#search-text').focus();
                $('#search-text').on('blur',function(){
                    console.log('blur');
                   $(this).focus();
                });
            });

            $('.search .header .cancel').click(function(){
                hideSearch();
            });

            function hideSearch() {
                $('#search-text').blur();
                $('#search-text').off('blur');
                $('.search').fadeOut();
                $('.store-menu').show();
            }

            $('#search-clear').click(function(){
                $('#search-text').val('');
            });

            $('#clear').click(function(){
                var foods = cart.getOrder().foods;

                for(var i = 0;i < foods.length;i ++){
                    var food = foods[i];
                    var $menuItem = $('.menu-item[menu-id='+food.menuId+']');
                    updateOperationRegion($menuItem,0);
                }

                cart.clear();
                $('.food-list-wrapper').hide();
                $repeatFoodItem.siblings().remove();
                updateCartMessage();
            });

            $('#cart').click(function(){
                var $foodListWrapper = $('.food-list-wrapper');
                if(cart.getCount() != 0 && !$foodListWrapper.is(":visible")){
                    showFoodList();
                }else{
                    $foodListWrapper.hide();
                    $('#repeat-cart-food-item').siblings('.food-item').remove();
                }
            });

            function showFoodList(){
                var foods = cart.getOrder().foods;
                var $list = $('#menus-cart-food-list');
                for(var i = 0;i < foods.length;i ++){
                    var food = foods[i];
                    var $foodItem = cloneFoodItem();
                    $foodItem.attr('menu-id',food.menuId);
                    $foodItem.find('.food-name').text(food.name);
                    var discountPrice = (food.price * food.discount * 0.1).toFixed(1);
                    $foodItem.find('.price').text('￥'+discountPrice);
                    $foodItem.find('.count').text(food.count);
                    $foodItem.find('.minus').click(cartMinusClicked);
                    $foodItem.find('.add').click(cartAddClicked);

                    $list.append($foodItem);
                }
                $('.food-list-wrapper').show();
            }

            function cartMinusClicked(){
                var menuId = $(this).parents('.food-item').attr('menu-id');
                var count = cart.minusItem(menuId);
                if(count == 0){
                    $(this).parents('.food-item').remove();
                }else{
                    $(this).siblings('.count').text(count);
                }

                if(cart.getCount() == 0){
                    $('.food-list-wrapper').hide();
                }

                updateCartMessage();
                var $menuItem = $('.menu-item[menu-id='+menuId+']');
                updateOperationRegion($menuItem,count);

            }

            function cartAddClicked(){
                var menuId = $(this).parents('.food-item').attr('menu-id');
                var count = cart.addItemById(menuId);
                $(this).siblings('.count').text(count);
                updateCartMessage();
                var $menuItem = $('.menu-item[menu-id='+menuId+']');
                updateOperationRegion($menuItem,count);
            }

            $('#book').click(function(){

                if(cart.getCount() == 0) return;
                cart.save();
                location.href = '#action=waiter_preview';
                hideSearch();
            });


            $('#search-text').on('input',function(){
                var text = $(this).val();
                if(text)
                    search(text);
            });
            var isSearching = false;
            //搜索菜单
            function search(keyword) {
                isSearching = true;
                if($repeatSearchItem != null){
                    $repeatSearchItem.siblings('.menu-item').remove();
                }
                $.getJSON('/api/waiter/menu/search/'+storeId+'/'+keyword).done(function(data){
                    console.log(data);
                    if(data && data.success === true){
                        showSearchData(data.data);
                    }
                    isSearching = false;
                }).fail(function(){
                    isSearching = false;
                });
            }

            function showSearchData(list) {
                if(list && list.length){
                    $.each(list,function(index,item){
                        var $item = cloneSearchItem();

                        var name = item.name;
                        var id = item.id;
                        var price = item.unitPrice;

                        $item.attr('menu-id',id);
                        $item.attr('menu-name',name);
                        $item.attr('menu-discount',item.discount);
                        $item.attr('menu-price',price);

                        $item.find('.name').text(name);
                        $item.find('.price').text('￥'+price);
                        $item.attr('menu-id',id);

                        $item.find('.add').click(add);
                        $item.find('.minus').click(minus);
                        var count = cart.getItemCount(id);
                        updateOperationRegion($item,count);
                        $repeatSearchItem.after($item);
                    });
                }else{
                    //没有符合条件的搜索结果
                }
            }


            /**
             * 类别item被点击
             */
            function categoryClicked(){
                if(!$(this).hasClass('on')){
                    loadCategoryData($(this));
                }
            }


            function loadCategoryData($item){

                //remove menu-item
                $('#repeat-menu-item').siblings('.menu-item').remove();

                $item.siblings('.category-item.on').removeClass('on');
                $item.addClass('on');

                getMenus($item.attr('ctg-id'));
            }

            function getCategory(storeId){
                $.getJSON("/api/category/"+storeId,{},function(data,status,xhr){
                    var $list = $('.category');
                    $.each(data,function(index,item){
                        var $item = $('<li class="category-item"></li>');
                        $item.attr('ctg-id',item.id);
                        $item.text(item.name);
                        $item.click(categoryClicked);
                        $list.append($item);
                    });
                    loadCategoryData($('.category-item:first-child'));
                });
            }

            function getMenus(id){
                $.getJSON("/api/getmenu/category/" + id,{},function(data,status,xhr){
                    console.log(data);
                    var $list = $('#menus-menu-list');
                    $.each(data,function(key,item){
                        var $item = cloneMenuItem();
                        $item.attr('menu-id',item.id);
                        $item.attr('menu-name',item.name);
                        $item.attr('menu-discount',item.discount);
                        $item.attr('menu-price',item.unitPrice);
                        if(item.discount == 10){ //没有折扣
                            $item.find('.price').text('￥' + item.unitPrice);
                            $item.find('.origin-price').text('');
                        }else{ //有折扣
                            var discountPrice = (item.unitPrice * item.discount * 0.1).toFixed(1);
                            $item.find('.price').text('￥' + discountPrice);
                            $item.find('.origin-price').text('￥' + item.unitPrice);
                        }
                        var url = item.menuPicUrl;
                        $item.find('.thumb').css({'background-image':'url('+url+')'});
                        $item.find('.menu-name').text(item.name);

                        if(item.soldOut == 1){
                            $item.find('.menu-operation').hide();
                            $item.find('.soldout').show();
                        }else{
                            $item.find('.add').click(add);
                            $item.find('.minus').click(minus);
                        }

                        var count = cart.getItemCount(item.id);
                        updateOperationRegion($item,count);

                        $list.append($item);
                    });
                });
            }

            function updateOperationRegion($item,count){
                var $minus = $item.find('.minus');
                var $count = $item.find('.count');
                $count.text(count);
                if(count > 0){
                    $count.show();
                    $minus.show();
                }else{
                    $count.hide();
                    $minus.hide();
                }
            }

            var $repeatFoodItem = undefined;
            function cloneFoodItem(){
                if(!$repeatFoodItem){
                    $repeatFoodItem = $('#repeat-cart-food-item');
                }

                var $item = $repeatFoodItem.clone();
                $item.attr('id',Date.now());
                $item.show();
                return $item;
            }

            var $repeatMenuItem = undefined;
            function cloneMenuItem(){
                if(!$repeatMenuItem){
                    $repeatMenuItem = $('#repeat-menu-item');
                }

                var $item = $repeatMenuItem.clone();
                $item.attr('id',Date.now());
                $item.show();
                return $item;
            }

            var $repeatSearchItem = undefined;
            function cloneSearchItem(){
                if(!$repeatSearchItem){
                    $repeatSearchItem = $('#waiter-search-repeat-item');
                }
                var $item = $repeatSearchItem.clone().attr('id','').show();
                return $item;
            }



            function minus() {
                var $parent = $(this).parents('.menu-item');
                var $count = $(this).siblings('.count');
                var id = $parent.attr('menu-id');
                var count = cart.minusItem(id);
                $count.text(count);
                updateCartMessage();
                if(count <= 0){
                    $count.hide();
                    $(this).hide();
                }
            }

            function isString(v){
                return typeof v === 'string';
            }


            function add(event){
                var $parent = $(this).parents('.menu-item');
                var id = $parent.attr('menu-id');
                var name = $parent.attr('menu-name');
                var price = $parent.attr('menu-price');
                var discount = $parent.attr('menu-discount');
//                    $parent.attr('menu-price');
                var food = {
                    menuId : parseInt(id),
                    name : name,
                    price : parseFloat(price),
                    count : 1,
                    discount:parseFloat(discount)
                };

                var count = cart.addItem(food);

                if(count > 0){
                    var $minus = $(this).siblings('.minus');
                    var $count = $(this).siblings('.count');
                    $count.text(count);
                    $minus.show();
                    $count.show();
                }

                fly({
                    left:event.pageX,
                    top:event.pageY
                });

            }
            
            //fly
            
            function cloneFly() {
                return $cartCount.clone().text(1).attr('id','').css({'z-index':5555555});
            }
            
            function fly(start) {
                var cartOffset = $cartCount.offset();
                var end = {
                    left:cartOffset.left,
                    top:cartOffset.top
                };
                var $flyer = cloneFly();
                $flyer.fly({
                    start:start,
                    end:end,
                    speed:2,
                    onEnd:function(){
                        $flyer.remove();
                        updateCartMessage();
                    }
                });
            }
            
        }());








    </script>
</div>